<template>
	<div class="Home">
		<div class="container">
			<header>
				<Search class="Search"></Search>
			</header>
			<div class="banner">
				<router-link to="/Detail">
					<img src="~img/home/home-banner.jpg">
				</router-link>
			</div>
			<HomeSwiper :info="New"></HomeSwiper>
			<HomeSwiper :info="Baby"></HomeSwiper>
			<HomeSwiper :info="Beauty"></HomeSwiper>
			<HomeSwiper :info="Furniture"></HomeSwiper>
			<HomeSwiper :info="Food"></HomeSwiper>
			<HomeSwiper :info="Global"></HomeSwiper>
		</div>
		<MenuBar></MenuBar>
	</div>
</template>

<script>
	import HomeSwiper from './components/HomeSwiper'
	export default{
		name:"Home",
		components:{
			HomeSwiper
		},
		data(){
			return{
				New:{},
				Baby:{},
				Beauty:{},
				Furniture:{},
				Food:{},
				Global:{}
			}
		},
		methods:{
			showInfo(){
				this.$http.get('/api/Home.json')
				.then(function(res){
						let resData=res.data;
						this.New=resData.prolist.new;
						this.Baby=resData.prolist.Baby;
						this.Beauty=resData.prolist.Beauty;
						this.Furniture=resData.prolist.Furniture;
						this.Food=resData.prolist.Food;
						this.Global=resData.prolist.Global;
						
					}.bind(this))
			}
		},
		mounted(){
			this.showInfo()
		}
	}
</script>

<style lang="scss" scoped>
		/*头部*/
.container{
	padding-bottom: 103px;
	header{
		width: 100%;
		height: 94px;
		background:url('~img/home/home-header.jpg') no-repeat;
		background-size:100%;
		overflow: hidden;
		.Search{
			margin: 0 auto;
			margin-top: 20px;
		}
	}
	.banner{
		width:100%;
		height: 0;
		padding-bottom:50.66%;
		overflow: hidden;
		background: #ccc;
		img{
			width: 100%;
		}
	}
}
	
</style>